<template>
  <div class="m-order-common">
    <!-- 常规普通订单 -->

    <!-- 搜索 -->
    <div class="order-search-tab" v-if="moreOptions">
      <div class="o" v-if="cParams.monthType != 'month' && cParams.monthType != 'befMonth'">
        <span class="title">下单时间</span>
        <div class="dis-block">
          <div class="date dis-block">
            <w-datepicker v-model="cParams.addStartTime"></w-datepicker>
          </div>
          <span class="icon">—</span>
          <div class="date dis-block">
            <w-datepicker v-model="cParams.addEndTime"></w-datepicker>
          </div>
        </div>
      </div>
      <div class="o">
        <span class="title">成交时间</span>
        <div class="dis-block">
          <div class="date dis-block">
            <w-datepicker v-model="cParams.payStartTime"></w-datepicker>
          </div>
          <span class="icon">—</span>
          <div class="date dis-block">
            <w-datepicker v-model="cParams.payEndTime"></w-datepicker>
          </div>
        </div>
      </div>
      <div class="o" style="margin-right: 8%;">
        <span class="title">成交金额</span>
        <div class="select dis-block">
          <w-input v-model="cParams.ofPriceFloor" :validate="false"></w-input>
        </div>
        <span class="icon">—</span>
        <div class="select dis-block">
          <w-input v-model="cParams.ofPriceCeiling" :validate="false"></w-input>
        </div>
      </div>
      <div class="o">
        <span class="title">商品货号</span>
        <div class="input dis-block">
          <w-input holder="请填写" v-model="cParams.goodsSerial" :validate="false"></w-input>
        </div>
      </div>
      <div class="o">
        <span class="title">交易类型</span>
        <div class="o-select dis-block">
          <w-select :options="paymentMarkOptions" v-model="cParams.paymentMark"></w-select>
        </div>
      </div>
      <div class="o">
        <span class="title">商品名称</span>
        <div class="input dis-block">
          <w-input holder="请填写" v-model="cParams.goodsName" :validate="false"></w-input>
        </div>
      </div>
      <!-- <div class="o">
        <span class="title">店铺名称</span>
        <div class="input dis-block">
          <w-input holder="请填写" v-model="cParams.storeName" :validate="false"></w-input>
        </div>
      </div> -->
      <div class="o">
        <span class="title">买家昵称</span>
        <div class="input dis-block">
          <w-input holder="请填写" v-model="cParams.userName" :validate="false"></w-input>
        </div>
      </div>
      <div class="o">
        <span class="title">订单编号</span>
        <div class="input dis-block">
          <w-input holder="请填写" v-model="cParams.orderId" :validate="false"></w-input>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="order-options">
        <w-button-group>
          <w-button type="main" @on-click="fetchCOrderList">搜索订单</w-button>
          <w-button type="option" style="margin-left: 30px" @on-click="onExportList">导出</w-button>
        </w-button-group>
      </div>
    </div>
    <!-- 收起、展示按钮 -->
    <div class="retact cur" @click="onRetact">
      <span class="option-title">{{moreOptions == true ? '收起': '展开'}}</span>
      <i class="icon-arrow" :class="{'arrow-actived': moreOptions == false}"></i>
    </div>

    <!-- 订单列表 -->
    <div class="m-order-lists">
      <div>
        <!-- 订单状态列表 -->
        <order-search :search-btns="searchBtns" @on-changeBtns="onChangeOrderStatus"></order-search>
      </div>
      <!-- 操作 -->
      <div class="list-options clearfix">
        <div class="fl">
          <div class="check-box">
            <w-checkbox v-model="all" :label="1" @input="onCheckedAll">
              <span class="all">全部</span>
            </w-checkbox>
          </div>
          <div class="btns-group">
            <w-button-group>
              <w-button :type="`${orderType == 'sign' ? 'main' : 'option'}`" @on-click="onChangeStatus('sign')">标记</w-button>
              <!-- <w-button :type="`${orderType == 'free' ? 'main' : 'option'}`" @on-click="onChangeStatus('free')">免运费</w-button> -->
              <!-- <w-button type="disabled" @on-click="onChangeStatus('outStock')">缺货</w-button> -->
              <!-- <w-button :type="`${orderType == 'outStock' ? 'main' : 'option'}`" @on-click="onChangeStatus('outStock')">缺货</w-button> -->
            </w-button-group>
          </div>
          <w-checkbox v-if="cParams.orderStatus == 'month' || cParams.orderStatus == '' || cParams.orderStatus == 'befMonth'">
            <span class="no-colse">不显示已关闭的订单</span>
          </w-checkbox>
          
        </div>
        <div class="only-page fr" v-if="orderList.pageCount > 1">
          <w-paging type="showArrow" :current="orderList.currentPage" :total="orderList.pageCount" @page="onChangePage"></w-paging>
        </div>
      </div>
      <!-- 订单列表组件 -->
      <div>
        <div style="margin-bottom: 20px;">
          <w-table :columns="columns"></w-table>
        </div>
        <div v-if="orderList.recordList && orderList.recordList.length">
          <order-item 
            v-for="(order, orderIndex) in orderList.recordList" 
            :key="orderIndex" 
            :order-index="orderIndex" 
            :order-list="orderList.recordList" 
            :order="order" 
            :all="all" 
            :showTd="showTd"
            @on-refresh="fetchCOrderList"
            @on-checked="onCheckedOrAll"></order-item>
        </div>
        <div style="text-align: center; margin: 20px" v-else>
          <p>暂无数据</p>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pages" v-if="orderList.pageCount > 1">
      <w-paging :current="orderList.currentPage" :total="orderList.pageCount" @page="onChangePage"></w-paging>
    </div>

  </div>
</template>

<script>
import { API4 } from 'js/config'
import OrderSearch from './components/orderSearch'
import OrderItem from './components/orderItem'
import { apiOrderMange } from 'js/api'
import { mapGetters } from 'vuex'
import { joinQueryParamsToUrl, session } from 'js/util'

export default {
  data() {
    return {
      showTd: true,
      all: false, // CheckBox是否全部选中
      checkOrder: false, // CheckBox是否选中,
      orderType: '',
      statusOptions: [
        {
          label: '等待买家付款',
          value: '10'
        },
        {
          label: '等待发货',
          value: '20'
        },
        {
          label: '已发货',
          value: '30'
        },
        {
          label: '退款中',
          value: '22'
        },
        {
          label: '需求评价',
          value: '50'
        },
        {
          label: '成功的订单',
          value: ''
        },
        {
          label: '关闭的订单',
          value: '0'
        }
      ],
      searchBtns: [
        {
          title: '当月订单',
          status: 'month'
        },
        {
          title: '全部订单',
          status: ''
        },
        {
          title: '上月订单',
          status: 'befMonth'
        }
      ],
      columns: [
        {title: '货品', width: '26%'},
        {title: '单价', width: '7%'},
        {title: '数量', width: '7%'},
        {title: '买家', width: '14%'},
        {title: '交易状态', width: '14%'},
        {title: '实收款', width: '14%'}
        // {title: '操作人', width: '18%'}
      ],
      // 交易类型
      paymentMarkOptions: [
        {value: 'zj', label: '中金交易'},
        {value: 'rcb', label: '农商行交易'}
      ],
      // 发货方
      shipperOptions: [
        {value: '2', label: '平台发货'},
        {value: '1', label: '商家发货'}
      ],
      // 商品类型
      goodsTypeOptions: [
        {value: '1', label: '现货'},
        {value: '0', label: '期货'}
      ],
      checkedAll: false, // CheckBox是否全部选中
      startPrice: '',
      endPrice: '',
      moreOptions: true,
      // 普通订单列表参数
      cParams: {
        accessToken: this.$store.getters.token || '',
        storeId: session.get('userInfo').storeId || '', // 店铺id
        orderMark: 'waitDeliv', // 订单类型
        currentPage: 1,
        showCount: 20,
        goodsName: '',
        goodsSerial: '',
        // storeName: '',
        receiverMobile: '',
        userName: '',
        consignor: '',
        shipCode: '',
        paymentMark: '',
        orderId: '',
        addStartTime: '',
        addEndTime: '',
        payStartTime: '',
        payEndTime: '',
        orderStatus: '20',
        ofPriceFloor: '',
        ofPriceCeiling: '',
        monthType: 'month',
        orderType: 3
      },
      orderList: {}
    }
  },
  components: {
    'order-search': OrderSearch,
    'order-item': OrderItem
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.fetchCOrderList()
  },
  methods: {
    /**
     * 更改订单搜索状态
     */
    onChangeOrderStatus(type) {
      this.cParams.monthType = type
      this.fetchCOrderList()
    },
    /**
     * 收起更多的搜索条件
     */
    onRetact() {
      this.moreOptions = !this.moreOptions
    },
    /**
     * 切换订单是否标记、免费、缺货等
     */
    onChangeStatus(type) {
      this.orderType = type
    },
    /**
     * 切换全选
     */
    onCheckedAll(checked) {
      if (!this.orderList.recordList || this.orderList.recordList.length == 0) return
      if (checked) {
        this.orderList.recordList.forEach(list => {
          list.checked = true
        })
      } else {
        this.orderList.recordList.forEach(list => {
          list.checked = false
        })
      }
    },
    /**
     * 获取普通订单列表
     */
    fetchCOrderList() {
      apiOrderMange.apiOrderListAll(this.cParams).then(data => {
        this.orderList = data || {}
        if (this.orderList.recordList && this.orderList.recordList.length) {
          this.orderList.recordList.forEach(list => {
            this.$set(list, 'checked', this.all)
          })
        }
      })
    },
    /**
     * 全选判断
     */
    onCheckedOrAll(all) {
      this.all = all
    },
    /**
     * 分页
     */
    onChangePage(page) {
      this.cParams.currentPage = page
      this.fetchCOrderList()
    },
    /**
     * 导出
     */
    onExportList() {
      apiOrderMange.apiOrderExport(this.cParams).then(resp => {
        window.location.href = joinQueryParamsToUrl(`${API4}orderform/YouzhengOrderform/exportRefundOrder`, this.cParams)
        // window.location.href = `${API4}orderform/YouzhengOrderform/exportRefundOrder?accessToken=${this.token}&orderType=3&userName=${this.cParams.userName}&paymentMark=${this.cParams.paymentMark}&orderId=${this.cParams.orderId}&addStartTime=${this.cParams.addStartTime}&payEndTime=${this.cParams.payEndTime}&ofPriceFloor=${this.cParams.ofPriceFloor}&ofPriceCeiling=${this.cParams.ofPriceCeiling}&monthType=${this.cParams.monthType}&goodsSerial=${this.cParams.goodsSerial}&goodsName=${this.cParams.goodsName}&deleteStatus=${this.cParams.deleteStatus}&payStartTime=${this.cParams.payStartTime}`
      })
    }
  }
}
</script>

<style lang="scss">
.m-order-common {
  .order-search-tab {
    .select-container {
      width: 100%;
    }
  }
  .datepicker {
    width: 142px;
    height: 28px;
  }
  .form-control {
    height: 28px !important;
    background-color: #ffffff !important;
    border-radius: 0 !important;
  }
  .order-options {
    .btn {
      width: 170px !important;
    }
  }
  .btns-group {
    .btn {
      width: 60px !important;
    }
    .option {
      // margin-left: 10px !important
    }
  }
  .pages {
    .m-paging {
      text-align: right !important
    }
  }
}
</style>

<style lang="scss" scoped>
.order-search-tab {
  margin-top: 20px;
  .title {
    width: 56px;
    text-align: right;
    display: inline-block;
    margin-right: 10px;
  }
  .icon {
    padding: 0 10px;
  }
  .dis-block {
    display: inline-block;
  }
  .date {
    width: 170px;
    display: inline-block;
    vertical-align: middle;
  }
  .o {
    margin-right: 40px;
    margin-bottom: 20px;
    display: inline-block;
  }
  .select {
    width:142px;
    height:28px; 
    vertical-align: middle;
  }
  .o-select {
    width: 170px;
    height: 28px;
  }
  .input {
    width: 170px;
    vertical-align: middle;
  }
  .order-options {
    margin: 48px auto 20px;
    text-align: center;
  }
}
.retact {
  text-align: center;
  color: #9B9B9B;
  padding-bottom: 5px;
  border-bottom: 1px solid #D7D7D7;
  .icon-arrow {
    width: 10px;
    height: 5px;
    background: url(../../assets/shouqi.png) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    margin-bottom: 2px;
  }
  .arrow-actived {
    transform: rotate(-180deg)
  }
}
.list-options {
  padding: 14px 0 14px 5px;
  .check-box {
    display: inline-block;
    margin-right: 10px;
    line-height: 22px;
    .all {
      padding-left: 10px;
    }
  }
  .btns-group {
    display: inline-block;
    margin-right: 30px;
  }
  .no-colse {
    padding-left: 10px;
  }
  .only-page {
    display: inline-block;
  }
}
// 订单列表
.m-order-lists {
  margin-top: 20px;
}
.pages {
  margin: 30px 0;
}
</style>
